<style>
    .upimgs-li{
        position: relative;
    }
    .upimgs-li .close{
        position: absolute;
        top: 0px;
        right: 0px;
        background: #4c4f52; color: white; padding: 3px; float:right; border-radius: 50%;
        width: 16px;
        height: 16px;
        line-height: 10px;
        font-size: 12px;
    }
</style>
<script>
    // 上传按钮
    var uploadingFieldName = '';
    var uploadingBtnObj = '';
</script>
{load href="__PLUG__/easyupload/easy-upload.css"/}
{load href="__PLUG__/easyupload/easyUpload.js"/}
<div style="padding-top: 30px;">
    {notempty name="info"}
    <div class="ui ignored info message">{$info}</div>
    {/notempty}
    <form class="ui small form">
        {:token()}
        {volist name="data" id="item"}
        <div {neq name="item.type" value="hidden"} class='inline field' {else/} style='height:1px;overflow:hidden;' {/neq}>
        <label for="{$item.name}" class="form-label">
            {$item.require ?= '<span style="color:red;">*</span>' }
            {$item.label}
        </label>
        {switch name="item.type" }
        {case value="checkbox"}
            <div style="display: inline-table;line-height: 200%" class="form-input">
            {volist name="item.options" id="o"}
            <div class="ui checkbox" style="margin-right: 30px;">
                <input type="checkbox" class="hidden" name="{$item.name}[]" value="{$key}"
                       {in name="key" value="$item.value"}checked="checked"{/in} >
                <label>{$o}</label>
            </div>
            {/volist}
            </div>
        {/case}
        {case value="radio"}
        {volist name="item.options" id="o"}
        <div class="ui radio checkbox" style="margin-right: 30px; margin-top: 7px;">
            <input type="radio" value="{$key}" name="{$item.name}" {if $key == $item.value}checked{/if}>
            <label> {$o}</label>
        </div>
        {/volist}
        {/case}
        {case value="select"}
        <select name="{$item.name}" class="ui small dropdown form-input dropdowner search">
            <option value="">请选择</option>
            {volist name="item.options" id="o"}
            <option value="{$key}" {if condition="isset($item.value) && ($key == $item.value)" }selected{/if}>{$o}</option>
            {/volist}
        </select>
        {/case}

        {case value="mselect"}
        <div class="ui multiple search selection dropdown mselect form-input dropdowner" >
            <input name="{$item.name}" type="hidden" value="{$item.value??''}">
            <i class="dropdown icon"></i>
            <div class="default text">请选择</div>
            <div class="menu">
                {volist name="item.options" id="o"}
                <div class="item" data-value="{$key}">{$o}</div>
                {/volist}
            </div>
        </div>
        {/case}

        {case value="textarea"}
        <textarea name="{$item.name}" class="form-input" rows="4">{$item.value}</textarea>
        {/case}


        {case value="password"}
        {empty name="item.value"}
            <input type="text" id="{$item.name}" name="{$item.name}" value="{$item.value}" class="form-input"/>
        {else/}
            <div style="display: inline-block; line-height: 30px;">******</div>
        {/empty}
        {/case}
        {case value="image"}
        <div style="display: inline-block;vertical-align: middle;">
        <ul id="{$item.name}" class="upload-item img-uploader" data-size="1">
            {notempty name="item.value"}
            <li class="append-img" ><img src="{$item.value}"/>
                <input type="hidden" name="{$item.name}[]" value="{$item.value}">
            </li>
            {/notempty}
            <li class="btn-uploader" data-toggle="tooltip" title="添加" onclick="popupPage('设置单图', '{:url('attachment/index',['dom_id'=>$item['name'],'type'=>1])}',900, 600) ">
                <i class="plus icon"></i>
            </li>
        </ul>
        </div>
        {/case}
        {case value="file"}
        <div style="display: inline-block;vertical-align: middle;">
            <ul id="{$item.name}" class="upload-item img-uploader" data-size="1">
                {notempty name="item.value"}
                <li class="append-img" ><img src="{:get_attachment_file_icon($item.value)}"/>
                    <input type="hidden" name="{$item.name}[]" value="{$item.value}">
                </li>
                {/notempty}
                <li class="btn-uploader" data-toggle="tooltip" title="添加" onclick="popupPage('设置单图', '{:url('attachment/index',['dom_id'=>$item['name'],'type'=>1])}',900, 600) ">
                    <i class="plus icon"></i>
                </li>
            </ul>
        </div>
        {/case}
        {case value="multimage"}
        <div style="display: inline-block;vertical-align: middle;">
        <ul id="{$item.name}" class="upload-item img-uploader" data-size="{$item.size??'1'}">
            {volist name="item.value" id='img'}
            <li class="append-img" ><img src="{$img}"/>
                <input type="hidden" name="{$item.name}[]" value="{$img}">
            </li>
            {/volist}
            <li class="btn-uploader" data-toggle="tooltip" title="添加" onclick="popupPage('设置多图', '{:url('attachment/index',['dom_id'=>$item['name']])}',900, 600) ">
                <i class="plus icon"></i>
            </li>
        </ul>
        </div>
        {/case}
        {case value="upimgs"}
        <div style="display: inline-block;vertical-align: middle;">
            <ul id="{$item.name}" class="upload-item" data-size="{$item.size??'1'}" >
                {volist name="item.value" id='img'}
                <li class="upimgs-li">
                    <img src="{$img}"/>
                    <input type="hidden" name="{$item.name}[]" value="{$img}">
                    <span class="close" onclick="removeUpimg(this)">X</span>
                </li>
                {/volist}
                <li class="" title="添加" onclick="handleUploadImg(this, '{$item.name}')" >
                    <i class="plus icon"></i>
                </li>
            </ul>
        </div>
        <div id="up-{$item.name}" style="display: none;"></div>
        <script>
            var max = parseInt('{$item.size??"0"}');
            $("#up-{$item.name}").easyUpload({
                url: '{:url("attachment/uploadFile",["pid" => $item.pid??'-1'])}',// 上传文件地址
                allowFileTypes: '*.jpg;*.jpeg;*.png;*.gif',// 允许上传文件类型，格式';*.doc;*.pdf'
                allowFileSize: 100000,// 允许上传文件大小(KB)
                multi: max > 1,// 是否允许多文件上传
                multiNum: max,// 多文件上传时允许的文件数
                note: '提示：支持格式为jpg,png,gif',//文件上传说明
                formParam: {
                },// 文件filename以外的配置参数，格式：{key1:value1,key2:value2}
                successFunc: function (res) {
                    $(uploadingBtnObj).before(`<li class="upimgs-li"><img src="${res.data.path}"/>
                    <input type="hidden" name="{$item.name}[]" value="${res.data.path}">
                    <span class="close" onclick="removeUpimg(this)">X</span></li>`)
                }
            });
        </script>
        {/case}
        {case value="upfile"}
        <div style="display: inline-block;vertical-align: middle;">
            <ul id="{$item.name}" class="upload-item" data-size="{$item.size??'1'}" >
                {volist name="item.value" id='v'}
                <li class="upimgs-li">
                    <img src="{:get_file_icon($item.ftype)}"/>
                    <input type="hidden" name="{$item.name}[]" value="{$v}">
                    <span class="close" onclick="removeUpimg(this)">X</span>
                </li>
                {/volist}
                <li class="" title="添加" onclick="handleUploadImg(this, '{$item.name}')" >
                    <i class="plus icon"></i>
                </li>
            </ul>
        </div>
        <div id="up-{$item.name}" style="display: none;"></div>
        <script>
            var max = parseInt('{$item.size??"0"}');
            $("#up-{$item.name}").easyUpload({
                url: '{:url("attachment/uploadFile",["pid" => 0])}',// 上传文件地址
                allowFileTypes: '*.mp3;*.mp4;*.srt;*.lrc;*.pdf;*.doc;*.docx;*.xls;*.xlsx;*.zip;*.rar;*.ppt;*.pptx',// 允许上传文件类型，格式';*.doc;*.pdf'
                allowFileSize: 100000,// 允许上传文件大小(KB)
                multi: max > 1,// 是否允许多文件上传
                multiNum: max,// 多文件上传时允许的文件数
                note: '提示：支持格式为mp4',//文件上传说明
                successFunc: function (res) {
                    console.log(res.data.ext);
                    $(uploadingBtnObj).before(`<li class="upimgs-li"><img src="${res.data.ext}"/>
                    <input type="hidden" name="{$item.name}[]" value="${res.data.path}">
                    <span class="close" onclick="removeUpimg(this)">X</span></li>`)
                }
            });
        </script>
        {/case}
        {case value="vodlist"}
        <div style="display: inline-block;vertical-align: middle;">
            <ul id="{$item.name}" class="upload-item">
                {notempty name="item.value"}
                {assign name="var" value=":explode(',',$item.value)" /}
                <li class="upimgs-li">
                    <img src="{$var[1]??''}"/>
                    <input type="hidden" name="{$item.name}" value="{$item.value}">
                    <span class="close" onclick="removeUpimg(this)">X</span>
                </li>
                {/notempty}
                {empty name="item.value"}
                <li class="" title="添加" onclick="vodSelector(this, '{$item.name}')" >
                    <i class="plus icon"></i>
                </li>
                {/empty}
            </ul>
        </div>
        {/case}
        {case value="date"}
        <input type="text" id="{$item.name}" name="{$item.name}"
               autocomplete="off" value="{$item.value}" class="form-input datepicker" />
        {/case}
        {case value="datetime"}
        <input type="text" id="{$item.name}" name="{$item.name}"
               autocomplete="off" value="{$item.value}" class="form-input datetimepicker" />
        {/case}
        {case value="time"}
        <input type="text" id="{$item.name}" name="{$item.name}"
               autocomplete="off" value="{$item.value}" class="form-input clear timerpicker" />
        {/case}
        {case value="hidden"}
        <input type="hidden" name="{$item.name}" value="{$item.value}"/>
        {/case}
        {case value="number"}
        <input type="number" name="{$item.name}" value="{$item.value}" class="form-input"/>
        {/case}
        {case value="text"}
        <span style="line-height: 243%;">{$item.value}</span>
        {/case}
        {case value="region"}
        {load href="__PLUG__/region/city.css"/}
        {load href="__PLUG__/region/Popt.js"/}
        {load href="__PLUG__/region/city.json.js"/}
        {load href="__PLUG__/region/citySet.js"/}
        <input class="form-input" name="{$item.name}" id="city_{$item.name}" placeholder="请选择" autocomplete="off" readonly="true">
        <script>
            $(function(){
                $("#city_{$item.name}").click(function (e) {
                    SelCity(this,e);
                });
            });
        </script>
        {/case}
        {case value="editor"}
        <div class="form-input" style="display: inline-block;">
            <textarea name="{$item.name}" class="editor" >{$item.value}</textarea>
        </div>
        {/case}
        {default /}
        <input type="text" id="{$item.name}" name="{$item.name}" placeholder="{$item.placeholder ?? ''}"
               autocomplete="off" value="{$item.value}" class="form-input"/>
        {/switch}
        {notempty name="item.info"}
        <div style="padding-left: 170px;">
            <div class="ui top pointing tiny label">{$item.info}</div>
        </div>
        {/notempty}
</div>
    {/volist}
    <div style="text-align: center; margin: 30px;">
        <button type="button" onclick="doSubmit('form')" class="ui teal small button" style="width: 150px;">{$btn_text?:'提 交'}</button>
    </div>
</form>
</div>
{load href="__PLUG__/tinymce/tinymce.min.js"/}
{load href="__PLUG__/jk-uploader.js"/}
<script>
    "use strict";
    $(function () {
        $('.img-uploader').on('click','.append-img', function(){
            var _this = this;
            layer.confirm('移除该图片?', {
                title: false,
                closeBtn: false,
                btn: ['确认','取消']
            }, function(index){
                $(_this).parent().find('.btn-uploader').fadeIn();
                $(_this).remove();
                layer.close(index);
            });
        });
        $('.img-uploader').each(function(){
           var cur = $(this).find('.append-img img').length;
           var size = $(this).data('size');
           if(cur >= size) $(this).find('.btn-uploader').hide();

        });
        $('.region-picker').change(function(){
            var $this = $(this);
            var url = $this.data('func');
            var pid = $this.val();
            if(url) {
                $.get(url, {pid: pid}, function(res){
                    $this.next().empty();
                    $.each(res, function(i,item) {
                        $this.next().append('<option value="' + item.id + '">' + item.name + '</option>')
                    })
                })
            }
        });
        // $('.mselect')
        //     .dropdown({
        //         allowAdditions: true
        //     })
        // ;

        $('.img_up').jkUploader();

    });
    var editorObj;
    // 自定义编辑器按钮
    function divEditorBtnFunc(editor){
        editorObj = editor;
        popupPage('插入图片', "{:url('attachment/index',['dom_id'=>$item['name'],'type'=>'editor'])}", 900, 600)
    }
    // 处理图片选择器返回的结果
    function handleSelectedImg(label, image_path, icons, type) {
        if(type == 'editor') {
            var content = '';
            for(var img of image_path ){
                content += '<img src="'+ img +'" style="width: 100%;"/>';
            }
            editorObj.insertContent(content)
        } else {
            if(image_path.length > 0) {
                randerImgs(label, image_path, icons);
            }
        }
    }
    function randerImgs(label, images, icons){
        var size = $('#' + label).data("size");
        var cur = $('#' + label + ' .append-img img').length;
        var up = images.length;
        if(cur + up >= size)  $('#' + label + ' .btn-uploader').hide();
        if(cur >= size) return;
        for(var i = 0 ; i < up; i++){
            if(i < size - cur) {
                $('#' + label).prepend('<li class="append-img" ><img src="'+icons[i]+'"/>' +
                    '<input type="hidden" name="'+label+'[]" value="'+images[i]+'"></li>')
            }
        }
    }
    // 表单提交
    function doSubmit(form_selecter) {
        tinyMCE.triggerSave();
        doFormSubmit(form_selecter, '{$action}');
    }

    // esc关闭窗口
    myKeyBoard.esc(function () {
        parent.layer.close(parent.layer.getFrameIndex(window.name));
    });

    $(function () {
        "use strict";
        if ($("textarea.editor").length > 0) {
            tinymce.init({
                selector: "textarea.editor",
                menubar: false,
                statusbar: false,
                // theme: "modern",
                height: 300,
                plugins: [
                  "lists charmap preview hr fullscreen table textcolor media link"
                ],
                language: 'zh_CN',
                toolbar_items_size: 'small',
                toolbar: "imageUpload media preview fullscreen | undo redo | bold italic underline strikethrough | forecolor backcolor | alignleft aligncenter alignright | fontsizeselect | table link inserttime ",
                setup: function (ed) {
                  // 定义按钮，
                    ed.ui.registry.addButton('imageUpload', {
                        tooltip: '插入图片',
                        icon: 'image',
                        onAction: function () {
                          // 这里点击后会插入一句话
                          divEditorBtnFunc(ed);
                        }
                  })
                },
                file_picker_callback: function (callback, value, meta) {
                    editor_file_picker_callback(callback, value, meta);
                },
                // video_template_callback: function(data) {
                //     return '<video width="' + data.width + '" height="' + data.height
                //         + '"' + (data.poster ? ' style="width:100%" poster="' + data.poster + '"' : '')
                //         + ' controls="controls">\n' + '<source src="' + data.source1 + '"'
                //         + (data.source1mime ? ' type="' + data.source1mime + '"' : '') + ' />\n'
                //         + (data.source2 ? '<source src="' + data.source2 + '"'
                //             + (data.source2mime ? ' type="' + data.source2mime + '"' : '') + ' />\n' : '')
                //         + '</video>';
                // }
            });
        }
    });


    function handleUploadImg(obj, name) {
        uploadingFieldName = name;
        uploadingBtnObj = obj;
        layer.open({
            title: '文件上传',
            type: 1,
            skin: 'layui-layer-rim', //加上边框
            area: ['600px', '400px'], //宽高
            shade:false,
            content: $('#up-' + name),
            end: function(res) {
            }
        });
    }
    function removeUpimg(obj)
    {
        $(obj).parent().remove();
        $(uploadingBtnObj).show();
    }

    // 视频选择器
    var editVodSelector = null;
    var editVodSelectorBtn = null;
    function vodSelector(obj, label){
        editVodSelector = label;
        editVodSelectorBtn = obj;
        popupPage("选择视频", '{:url("tencent/vodlist",["type"=>1])}', '90%', '90%')
    }
    // 处理选择后
    function handleSelectVod(fileId,baseInfo,metaInfo) {
        if(baseInfo) {
            $(editVodSelectorBtn).hide();
            $('#' + editVodSelector).prepend('<li class="upimgs-li" ><img src="'+baseInfo.CoverUrl+'"/>' +
                '<input type="hidden" name="'+editVodSelector+'" value="'+baseInfo.MediaUrl+','+baseInfo.CoverUrl +','+fileId +','+metaInfo.Duration+'">' +
                '<span class="close" onclick="removeVodUpBtn(this)">X</span></li>')
        } else layer.msg('出错了, 请重新选择');
    }
    function removeVodUpBtn(obj)
    {
        $(obj).parent().remove();
        $(editVodSelectorBtn).show();
    }

</script>

